<template>
  <div class="home">
    <van-search 
    v-model="value" 
    placeholder="请输入搜索关键词"
    disabled
    shape="round"
    @click="$router.push(`/home/searchPop`)"
     />
     <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="300000" indicator-color="blue">
        <van-swipe-item v-for="img in banner" :key="img.id">
          <img :src="img.image_url" alt="" class="banner-img">
        </van-swipe-item>
    </van-swipe>
    <!-- 宫格选项 -->
    <van-grid :column-num="5">
        <van-grid-item :icon="item.icon_url" :text="item.name"
                        v-for="item in channel" :key="item.id" >
        </van-grid-item>
    </van-grid>
    <!-- 搜索页 -->
    <transition name="search">
      <router-view/>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
 
  data() {
    return {
      value: "",
      banner:[],
      HomeData:{},
      channel:[]
    }
  },
  async created () {
    const {data} = await this.$api.getHome();
    this.HomeData = data;
    this.banner = data.banner
    this.channel = data.channel
    console.log(data.channel);
  
  },
}
</script>

<style scoped>
  .banner-img{
    max-width: 100%;
  }
  .search-enter{
    opacity: 0;
  }
  .search-enter-to{
    opacity: 1;
  }
  .search-enter-active{
    transition: all 1s;
  }
  .search-leave{
    opacity: 1;
    transform: translate(0,0);
  }
  .search-leave-to{
    opacity: 0;
    transform: translate(0,-100%);
  }
  .search-leave-active{
    transition: all .5s;
  }
  
</style>
